Project Loon

import {interval} from '@mootari/range-slider' // two ended slider

d = transpose(data).map(d => ({ ...d, time: new Date(d.time) }))
td = d.filter(d => d.segment_id == segment)

// find minimal radius circle that includes entire flight path
minLon = d3.min(td.map(d => d.longitude))
maxLon = d3.max(td.map(d => d.longitude))
minLat = d3.min(td.map(d => d.latitude))
maxLat = d3.max(td.map(d => d.latitude))
center = [(minLon + maxLon) / 2, (minLat + maxLat) / 2]
corners = [[minLon, minLat], [minLon, maxLat], [maxLon, minLat], [maxLon, maxLat]]
dist = d3.max(corners, corner => d3.geoDistance(center, corner))
radius = dist * (180 / Math.PI)
circle = d3.geoCircle().center(center).radius(radius)()

viewof segment = Inputs.select(Array.from(new Set(d.map(d => d.segment_id))),
                               {label: "Segment ID"})
//viewof projection = Inputs.select(["azimuthal-equidistant", "equal-earth"],
//                                  {label: "Projection"})

world = FileAttachment("countries-110m.json").json()
land = topojson.feature(world, world.objects.land)

viewof map_world = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "equal-earth" },
  marks: [
    //Plot.frame(),
    Plot.sphere(),
    Plot.graticule(),
    Plot.geo(land, {fill: "lightgrey"}),
    Plot.dot(td.slice(1), {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.2,
    }),
    Plot.dot(td.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 3, stroke: "red", strokeOpacity: 1, symbol: "plus"
    }),
    Plot.dot(td.slice(td.length - 1, td.length), {
      x: "longitude", y: "latitude",
      r: 3, stroke: "red", strokeOpacity: 1, symbol: "times"
    })
  ],
})

viewof map_zoom = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "azimuthal-equidistant", domain: circle },
  marks: [
    Plot.frame(),
    Plot.graticule(),
    Plot.geo(land, {fill: "lightgrey"}),
//    Plot.dot(transpose(cor), {
//      x: "longitude", y: "latitude",
//      r: 3, stroke: "blue", //strokeOpacity: 0.2,
//    }),
    Plot.dot(td.slice(1), {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.2,
    }),
    Plot.dot(td.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 6, stroke: "red", strokeOpacity: 1, symbol: "plus"
    }),
    Plot.dot(td.slice(td.length - 1, td.length), {
      x: "longitude", y: "latitude",
      r: 6, stroke: "red", strokeOpacity: 1, symbol: "times"
    })
  ],
})
viewof scatter_alt = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Altitude (meters)" },
  marks: [
    Plot.dot(td, { x: "time", y: "altitude", r: 0.5 }),
  ]
})

winds = new Map([["Zonal (east-west)", "wind_u"],
                 ["Meridional (north-south)", "wind_v"]])
viewof y_wind = Inputs.select(winds, {label: "Wind direction"})

viewof scatter_wind = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Velocity (meters/second)" },
  marks: [
    Plot.dot(td, { x: "time", y: y_wind, r: 0.5 }),
  ]
})

fluxes = new Map([["East", "flux_east"], ["West", "flux_west"],
                  ["North", "flux_north"], ["South", "flux_south"]])
viewof y_flux = Inputs.select(fluxes, {label: "Flux direction"})

viewof scatter_flux = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Flux (pascals)", transform: (f) => f * 1000 },
  marks: [
    Plot.dot(td, { x: "time", y: y_flux, r: 0.5 }),
  ]
})